<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="com.houduan.model.Computer" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>电脑管理 - 网吧管理系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <aside class="lyear-layout-sidebar">
            <div id="logo" class="sidebar-header">
                <a href="index.jsp"><img src="images/logo-sidebar.png" alt="网吧管理系统" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"><a href="StatisticsServlet"><i class="mdi mdi-home"></i> 后台首页</a></li>
                        <li class="nav-item active"><a href="ComputerServlet?action=list"><i class="mdi mdi-laptop"></i> 电脑管理</a></li>
                        <li class="nav-item"><a href="OrderServlet?action=list"><i class="mdi mdi-cart"></i> 订单管理</a></li>
                        <li class="nav-item"><a href="SessionServlet?action=list"><i class="mdi mdi-timer"></i> 上机管理</a></li>
                        <li class="nav-item"><a href="UserServlet?action=list"><i class="mdi mdi-account"></i> 用户管理</a></li>
                    </ul>
                </nav>
            </div>
        </aside>

        <header class="lyear-layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title">网吧管理系统</span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="用户头像" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="change_password.jsp"><i class="mdi mdi-lock-outline"></i> 修改密码</a></li>
                                <li><a href="logout.jsp"><i class="mdi mdi-logout-variant"></i> 退出登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <main class="lyear-layout-content">
            <div class="container-fluid">
                <h2>电脑管理</h2>

                <!-- 操作按钮 -->
                <div class="text-right mb-3">
                    <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addComputerModal">新增电脑</button>
                    <button class="btn btn-secondary btn-sm" onclick="refreshPage()">刷新</button>
                </div>

                <!-- 电脑表格 -->
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>型号</th>
                        <th>状态</th>
                        <th>价格（每小时）</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <%
                        List<Computer> computers = (List<Computer>) request.getAttribute("computers");
                        if (computers != null && !computers.isEmpty()) {
                            for (Computer computer : computers) {
                    %>
                    <tr>
                        <td><%= computer.getId() %></td>
                        <td><%= computer.getName() %></td>
                        <td><%= computer.getType() %></td>
                        <td><%= computer.getStatus() %></td>
                        <td><%= computer.getPrice() %></td>
                        <td><%= computer.getDescription() %></td>
                        <td>
                            <button class="btn btn-info btn-sm"
                                    data-toggle="modal"
                                    data-target="#editComputerModal"
                                    onclick="populateEditForm('<%= computer.getId() %>', '<%= computer.getName() %>', '<%= computer.getType() %>', '<%= computer.getStatus() %>', '<%= computer.getPrice() %>', '<%= computer.getDescription() %>')">编辑</button>
<%--                            <a href="ComputerServlet?action=delete&id=<%= computer.getId() %>"--%>
<%--                               class="btn btn-danger btn-sm"--%>
<%--                               onclick="return confirm('确认删除此电脑吗？')">删除</a>--%>
                        </td>
                    </tr>
                    <%
                        }
                    } else {
                    %>
                    <tr>
                        <td colspan="7" class="text-center">暂无电脑数据</td>
                    </tr>
                    <% } %>
                    </tbody>
                </table>
            </div>
        </main>

        <!-- 新增电脑模态框 -->
        <div class="modal fade" id="addComputerModal" tabindex="-1" role="dialog" aria-labelledby="addComputerModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addComputerModalLabel">新增电脑</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="ComputerServlet?action=insert">
                            <div class="form-group">
                                <label for="name">名称</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="type">型号</label>
                                <input type="text" class="form-control" id="type" name="type" required>
                            </div>
                            <div class="form-group">
                                <label for="status">状态</label>
                                <select class="form-control" id="status" name="status" required>
                                    <option value="空闲">空闲</option>
                                    <option value="使用中">使用中</option>
                                    <option value="维护中">维护中</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="price">价格（每小时）</label>
                                <input type="number" step="0.01" class="form-control" id="price" name="price" required>
                            </div>
                            <div class="form-group">
                                <label for="description">描述</label>
                                <textarea class="form-control" id="description" name="description"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑电脑模态框 -->
        <div class="modal fade" id="editComputerModal" tabindex="-1" role="dialog" aria-labelledby="editComputerModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editComputerModalLabel">编辑电脑</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="ComputerServlet?action=update">
                            <input type="hidden" id="editId" name="id">
                            <div class="form-group">
                                <label for="editName">名称</label>
                                <input type="text" class="form-control" id="editName" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="editType">型号</label>
                                <input type="text" class="form-control" id="editType" name="type" required>
                            </div>
                            <div class="form-group">
                                <label for="editStatus">状态</label>
                                <select class="form-control" id="editStatus" name="status" required>
                                    <option value="空闲">空闲</option>
                                    <option value="使用中">使用中</option>
                                    <option value="维护中">维护中</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="editPrice">价格（每小时）</label>
                                <input type="number" step="0.01" class="form-control" id="editPrice" name="price" required>
                            </div>
                            <div class="form-group">
                                <label for="editDescription">描述</label>
                                <textarea class="form-control" id="editDescription" name="description"></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/scripts.min.js"></script>
        <script>
            // 刷新页面
            function refreshPage() {
                window.location.href = "ComputerServlet?action=list";
            }

            // 填充编辑表单
            function populateEditForm(id, name, type, status, price, description) {
                document.getElementById('editId').value = id;
                document.getElementById('editName').value = name;
                document.getElementById('editType').value = type;
                document.getElementById('editStatus').value = status;
                document.getElementById('editPrice').value = price;
                document.getElementById('editDescription').value = description;
            }
        </script>
    </div>
</div>
</body>
</html>
